<template>
    <el-drawer 
    @closed="handleClose"
    @opened="handleOpen"
    v-model="dialogFormVisible" title="I have a nested table inside!" direction="rtl" size="50%">
        <!-- 自定义头部 -->
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="'#'+icon"></use>
                </svg>
               {{ props.title  }}
            </h4>
            <el-button type="primary" @click="ok">点击保存</el-button>
        </template>

        <!-- 自定义内容 -->
        <slot name="nested"></slot>
    </el-drawer>
</template>
<script setup>
import { ref } from "vue"
// 抽屉显示与隐藏
let dialogFormVisible = ref(false)
// 定义props接收需要的参数
let props = defineProps({
    // 控制抽屉显示与隐藏
    show: {
        type: Boolean,
        default: false
    },
    // 抽屉头部图标
    icon:{
        type:String,
        default:'icon-jiaoseguanli'
    },
    // 抽屉标题
    title:{
        type:String,
        default:'分配权限'
    },
    // 抽屉打开的时候
    opened:{
        type:Function,
    },
    // 抽屉关闭的时候
    closed:{
        type:Function,
    }
})
// 定义组件的emit事件
let emit = defineEmits(['update:show','ok'])

// 抽屉打开时触发的事件
let handleOpen=()=>{
    // console.log(props);
    typeof(props.opened)==='function' && props.opened()
}
// 抽屉关闭时触发的事件
let handleClose = () =>{
    // 关闭抽屉
    dialogFormVisible.value = false
    // 触发父组件的更新数据
    emit('update:show',dialogFormVisible.value)
}

let ok = ()=>{
    emit('ok')
}


</script>